<template>
	<div>
		<panle title='通知信息' content="站内以送系统信息"></panle>
		<div class="searchbar">
			<el-row class="pt20">
				<el-col :span="12">
					<el-button size="mini" @click="init()">刷新</el-button>
					<pers-button icon="el-icon-edit" size="mini" @click="add()" perms="tool:notice:add" type="primary"
						label="添加"></pers-button>
					<pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()"
						perms="tool:notice:del" label="批量删除"></pers-button>
				</el-col>
				<el-col :span="12" style="text-align: right;">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">

						<el-form-item label="">
							<el-input v-model="formInline.keyword" size="mini" placeholder="请输入查询名称"></el-input>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" size="mini" @click="serach">查询</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>

		<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id"
			:header-cell-style="{background:'#f9f9f9'}" stripe default-expand-all v-loading="loading"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>

			<el-table-column prop="id" label="ID"></el-table-column>
			<el-table-column prop="context" label="通知内容"></el-table-column>
			<el-table-column prop="user_id" label="发送谁"></el-table-column>
			<el-table-column prop="status" label="是否启用">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"
						@change="changeSwitch(scope.row)" :active-value="1" :inactive-value="0"></el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="id" label="操作">
				<template slot-scope="scope">
					
					<PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil" perms="tool:notice:edit"
						@click="edit(scope.row)"></PersButton>
					<PersButton type="text" size="mini" icon="el-icon-delete" perms="tool:notice:del" label="删除"
						@click="del(scope.row)"></PersButton>
						<PersButton type="text" size="mini" label="立即发送" icon="el-icon-s-promotion" perms="tool:notice:edit"
							@click="sendNotice(scope.row)"></PersButton>
				</template>
			</el-table-column>
		</el-table>

		<div class="block">

			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<el-dialog v-dialogDrag :visible.sync="open" width="600px" append-to-body
			:title="!form.id? '新增通知信息' : '修改通知信息'">
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-row>

					<el-col :span="24">
						<el-form-item label="通知对象" prop="user_id">
							<el-select v-model="form.user_id" multiple  placeholder="请选择通知对象" size="small" style="width:100%">
								<el-option v-for="item in memberlist" :key="item.user_name" :label="item.user_name"
									:value="item.uid">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="通知内容">
							<el-input v-model="form.context" size="mini" type="textarea" :rows="4"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="是否启用" prop="status">
							<el-radio-group v-model="form.status">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="open = false" size="small">取 消</el-button>
				<el-button type="primary" @click="!form.id? submitForm('form') : subEditForm('form') " size="small">确 定
				</el-button>
			</div>

		</el-dialog>


	</div>
</template>

<script>
	let _self;
	import Panle from '@/components/Panle';
	import PersButton from '@/components/PersButton';
	import {
		listNotice,
		addNotice,
		delNotice,
		editNotice,
		sendNotice
	} from '@/api/tool/notice';
	import {
		selectMemberField
	} from '@/api/system/member'
	export default {
		components: {
			Panle,
			PersButton
		},
		data() {
			return {
				loading: false,
				pageSize: 10, //一页显示多少条
				pageNumber: 1,
				total: 0, //总页数
				tableData: [],
				serachword: '',
				formInline: {},
				open: false,
				form: {

					'user_id': undefined,

					'context': undefined,

					'status': undefined,

				},
				rules: {

					user_id: [{
						required: true,
						message: '通知对象.不能为空',
						trigger: 'blur'
					}],
					context: [{
						required: true,
						message: '通知内容.不能为空',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '是否启用.不能为空',
						trigger: 'blur'
					}],
				},

				multipleSelection: [],
				checkedAll: false,
				checked: true,
				memberlist: [],

			}
		},
		created() {
			_self = this;
			_self.init();
		},
		methods: {
			init: function() {
				_self.loading = true;
				let param = {
					"pageSize": _self.pageSize,
					"pageNumber": _self.pageNumber,
					"keyword": _self.serachword
				}
				listNotice(param).then((res) => {
					
					if (res.code == 200) {
						_self.tableData = res.data.list;
						_self.total = res.data.total;
						_self.loading = false;
					}
				})

				selectMemberField().then((res) => {
					const menu = {
						uid: 0,
						user_name: '所有人'
					};
					var reuslt = res.data;
					reuslt.unshift(menu);
					_self.memberlist = reuslt;
				})



			},
			serach: function() {
				_self.serachword = _self.formInline.keyword;
				_self.init();
			},
			handleSizeChange: function(e) {
				console.log(e);
				_self.pageSize = e;
				_self.init();
			},
			handleCurrentChange: function(e) {
				console.log(e);
				_self.pageNumber = e;
				_self.init();
			},
			handleSelectionChange: function(e) {
				console.log(e);
				let selectChang = []
				for (let item of e) {
					selectChang.push(item.role_id)

				}
				_self.multipleSelection = selectChang;
				console.log(selectChang);
			},

			add: function() {
				_self.form = {

					'user_id': undefined,

					'context': undefined,

					'status': undefined,

				};

				_self.open = true;
			},

			submitForm: function(data) {

				_self.$refs[data].validate((valid) => {
					if (valid) {
						addNotice(_self.form).then((res) => {
							console.log(res)
							if (res.code == 200) {
								_self.msgSuccess(res.msg);
								_self.init();
								_self.open = false;
							} else {
								_self.msgError(res.msg);
							}
						})
					} else {
						return false;
					}
				})
			},
			del: function(data) {
				_self.$confirm('确定删除此项', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					delNotice(data.id).then((res) => {
						if (res.code == 200) {
							_self.msgSuccess(res.msg);
							_self.init();
						} else {
							_self.msgError(res.msg);
						}
					})


				}).catch(() => {
					_self.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			edit: function(data) {

				_self.form.id = data.id;
              let roles = [];
				data.user_id.forEach((it) => {
					roles.push(parseInt(it));
				})
				console.log(roles);
				let editForm = {
					"id": data.id,

					'user_id':roles ,

					'context': data.context,

					'status': data.status,


				}
				Object.assign(_self.form, editForm);
				_self.open = true;
			},
			subEditForm: function(data) {


				_self.$refs[data].validate((valid) => {
					if (valid) {
						editNotice(_self.form).then((res) => {
							if (res.code == 200) {
								_self.msgSuccess(res.msg);
								_self.init();
								_self.open = false;

							} else {
								_self.msgError(res.msg);
							}
						})
					} else {
						return false;
					}
				})

			},
			sendNotice(data){
				_self.$confirm('确定发送此条信息吗', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
				
					sendNotice(data.id).then((res) => {
						if (res.code == 200) {
							_self.msgSuccess(res.msg);
							_self.init();
							_self.$store.dispatch('GetNoticeMessage');
						} else {
							_self.msgError(res.msg);
						}
					})
				
				
				}).catch(() => {
					_self.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}

		}
	}
</script>

<style lang="scss">
	@import "@/assets/css/common.scss";

	.demo-form-inline {
		.el-form-item {
			margin-bottom: 0;
		}
	}

	.el-tree {
		max-height: 200px;
		overflow: auto;
		background: #f7f7f7;
	}

	.el-tree-node__label,
	.el-textarea__inner {
		font-size: 12px;
	}

	.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
		float: left;
		width: 100px;
	}

	.el-checkbox__label {
		font-size: 12px !important;
	}
</style>
